<template>
    <div >
        <x-card class="main-x-card">
            <div class="tab-header">
                <h2>我的订单</h2>
            </div>
                <base-tabs v-model="status" @tab-click="handleClick">
                    <base-tab-pane label="已完成" name="1">
                        <Order v-if="status == '1'" :status="status"></Order>
                    </base-tab-pane>
                    <base-tab-pane label="待付款" name="0">
                        <Order v-if="status == '0'" :status="status"></Order>
                    </base-tab-pane>
                    <base-tab-pane label="已取消" name="-1">
                        <Order v-if="status == '-1'" :status="status"></Order>
                    </base-tab-pane>
                    <base-tab-pane label="待退款" name="4">
                        <Order v-if="status == '4'" :status="status"></Order>
                    </base-tab-pane>
                    <base-tab-pane label="全部" name="9">
                        <Order v-if="status == '9'" :status="status"></Order>
                    </base-tab-pane>
                </base-tabs>
            </x-card>
    </div>


</template>

<script>
import {XCard} from "@zkwq/business";
import Order from "@/views/components/Order.vue";   

export default {
    components: {
        XCard,Order
    },
    data() {
        return {
            status:"1",
        }
    },
    methods: {
        handleClick(tab, event) {
        }
    }
}
</script>
<style scoped lang="scss">
.main-x-card {
    padding-top: 10px;
}
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
  
  h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}
</style>